<template>
  <div class="modern-header">
    <!-- 顶部信息栏 -->
    <div class="top-info-bar">
      <div class="container">
        <div class="info-left">
          <span class="info-item">
            <i class="el-icon-phone-outline"></i> 客服热线: 400-123-4567
          </span>
          <span class="info-item">
            <i class="el-icon-time"></i> 工作时间: 周一至周日 9:00-22:00
          </span>
        </div>
        <div class="info-right">
          <template v-if="isLogin">
            <span class="welcome-text">欢迎您，{{ userInfo.username }}</span>
            <span class="info-divider">|</span>
            <span class="info-link" @click="logout">退出登录</span>
          </template>
          <template v-else>
            <span class="info-link" @click="goToLogin">登录</span>
            <span class="info-divider">|</span>
            <span class="info-link" @click="goToRegister">注册</span>
          </template>
          <span class="info-divider">|</span>
          <span class="info-link" @click="goToOrders">我的订单</span>
          <span class="info-divider">|</span>
          <span class="info-link" @click="goToHelp">帮助中心</span>
        </div>
      </div>
    </div>
    
    <!-- 主导航区域 -->
    <div class="main-navigation">
      <div class="container">
        <div class="logo-area" @click="goToHome">
          <div class="logo-icon">
            <i class="el-icon-shopping-bag-1"></i>
          </div>
          <div class="logo-text">
            <h1>农产品金融销售平台</h1>
            <div class="logo-slogan">新鲜、健康、品质保障</div>
          </div>
        </div>
        
        <div class="search-box">
          <el-input
            placeholder="搜索产品..."
            prefix-icon="el-icon-search"
            v-model="searchText"
            @keyup.enter.native="handleSearch"
            clearable
          >
            <el-button slot="append" type="success" @click="handleSearch">搜索</el-button>
          </el-input>
          <div class="search-keywords">
            <span 
              v-for="(keyword, index) in hotKeywords" 
              :key="index"
              @click="searchByKeyword(keyword)"
            >
              {{ keyword }}
            </span>
          </div>
        </div>
        
        <div class="quick-actions">
          <div class="action-item" @click="goToFavorites">
            <i class="el-icon-star-off"></i>
            <span>收藏夹</span>
            <div class="badge" v-if="favoritesCount > 0">{{ favoritesCount }}</div>
          </div>
          <div class="action-item" @click="goToCart">
            <i class="el-icon-shopping-cart-2"></i>
            <span>购物车</span>
            <div class="badge" v-if="cartCount > 0">{{ cartCount }}</div>
          </div>
          <div class="action-item user-center" @click="goToUserCenter">
            <i class="el-icon-user"></i>
            <span>个人中心</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分类导航菜单 -->
    <div class="category-nav">
      <div class="container">
        <div class="category-menu">
          <div class="all-categories" @click="toggleCategoryDropdown">
            <i class="el-icon-menu"></i>
            <span>全部商品分类</span>
            <i :class="['dropdown-icon', {'is-active': showCategoryDropdown}, 'el-icon-arrow-down']"></i>
            
            <!-- 分类下拉菜单 -->
            <div class="category-dropdown" v-show="showCategoryDropdown">
              <div 
                v-for="category in categories" 
                :key="category.id"
                class="category-item"
                @click.stop="goToCategory(category)"
              >
                <i :class="getCategoryIcon(category.name)"></i>
                <span>{{ category.name }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
          
          <div class="nav-links">
            <div 
              v-for="(nav, index) in navLinks" 
              :key="index"
              class="nav-item"
              :class="{ active: currentPath === nav.path }"
              @click="goToPath(nav.path)"
            >
              {{ nav.name }}
            </div>
          </div>
        </div>
        
        <!-- 移动端菜单切换按钮 -->
        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
          <i :class="showMobileMenu ? 'el-icon-close' : 'el-icon-s-unfold'"></i>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="mobile-menu" v-show="showMobileMenu">
      <div class="mobile-search">
        <el-input
          placeholder="搜索产品..."
          prefix-icon="el-icon-search"
          v-model="searchText"
          @keyup.enter.native="handleSearch"
          clearable
        >
          <el-button slot="append" type="success" @click="handleSearch">搜索</el-button>
        </el-input>
      </div>
      
      <div class="mobile-nav-links">
        <div 
          v-for="(nav, index) in navLinks" 
          :key="index"
          class="mobile-nav-item"
          :class="{ active: currentPath === nav.path }"
          @click="goToPath(nav.path)"
        >
          {{ nav.name }}
        </div>
      </div>
      
      <div class="mobile-categories">
        <div class="mobile-section-title">商品分类</div>
        <div 
          v-for="category in categories" 
          :key="category.id"
          class="mobile-category-item"
          @click="goToCategory(category)"
        >
          <i :class="getCategoryIcon(category.name)"></i>
          <span>{{ category.name }}</span>
        </div>
      </div>
      
      <div class="mobile-user-actions">
        <div class="mobile-section-title">用户中心</div>
        <div class="mobile-action-grid">
          <div class="mobile-action-item" @click="goToUserCenter">
            <i class="el-icon-user"></i>
            <span>个人中心</span>
          </div>
          <div class="mobile-action-item" @click="goToOrders">
            <i class="el-icon-s-order"></i>
            <span>我的订单</span>
          </div>
          <div class="mobile-action-item" @click="goToFavorites">
            <i class="el-icon-star-off"></i>
            <span>我的收藏</span>
          </div>
          <div class="mobile-action-item" @click="goToCart">
            <i class="el-icon-shopping-cart-2"></i>
            <span>购物车</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Request from '@/utils/request'

export default {
  name: 'FrontHeader',
  data() {
    return {
      userInfo: {},
      isLogin: false,
      searchText: '',
      showCategoryDropdown: false,
      showMobileMenu: false,
      categories: [],
      cartCount: 0,
      favoritesCount: 0,
      hotKeywords: ['有机蔬菜', '新鲜水果', '五谷杂粮', '特色农产品', '地方特产'],
      navLinks: [
        { name: '首页', path: '/' },
        { name: '新品上市', path: '/products?tag=new' },
        { name: '农业知识', path: '/front/knowledge' },
        { name: '专家咨询', path: '/experts' },
        { name: '我要融资', path: '/finance-manager' }
      ],
      currentPath: '/'
    }
  },
  created() {
    this.checkLogin()
    this.getCategories()
    this.currentPath = this.$route.path
    
    // 监听路由变化
    this.$router.afterEach((to) => {
      this.currentPath = to.path
      this.showMobileMenu = false
      this.showCategoryDropdown = false
    })
    
    // 添加点击外部关闭下拉菜单的事件
    document.addEventListener('click', this.closeCategoryDropdown)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeCategoryDropdown)
  },
  mounted() {
    if (this.isLogin) {
      this.getCartCount()
      this.getFavoritesCount()
    }
  },
  methods: {
    checkLogin() {
      const userStr = localStorage.getItem('frontUser')
      if (userStr) {
        this.userInfo = JSON.parse(userStr)
        this.isLogin = true
      }
    },
    async getCategories() {
      try {
        const res = await Request.get('/category/list')
        if (res.code === '0') {
          this.categories = res.data
        }
      } catch (error) {
        console.error('获取分类失败:', error)
      }
    },
    async getCartCount() {
      try {
        const res = await Request.get(`/cart/count/${this.userInfo.id}`)
        if (res.code === '0') {
          this.cartCount = res.data || 0
        }
      } catch (error) {
        console.error('获取购物车数量失败:', error)
      }
    },
    async getFavoritesCount() {
      try {
        const res = await Request.get(`/favorite/count/${this.userInfo.id}`)
        if (res.code === '0') {
          this.favoritesCount = res.data || 0
        }
      } catch (error) {
        console.error('获取收藏数量失败:', error)
      }
    },
    getCategoryIcon(name) {
      const iconMap = {
        '蔬菜': 'el-icon-food',
        '水果': 'el-icon-cherry',
        '粮油': 'el-icon-dish',
        '肉类': 'el-icon-chicken',
        '海鲜': 'el-icon-dessert',
        '乳制品': 'el-icon-ice-cream',
        '零食': 'el-icon-ice-cream-square',
        '饮料': 'el-icon-milk-tea',
        '酒水': 'el-icon-grape',
        '茶叶': 'el-icon-coffee',
        '干货': 'el-icon-fork-spoon',
        '调味品': 'el-icon-tableware',
        '其他': 'el-icon-shopping-bag-2'
      }
      return iconMap[name] || 'el-icon-shopping-bag-2'
    },
    handleSearch() {
      if (!this.searchText.trim()) return
      this.$router.push({
        path: '/products',
        query: { keyword: this.searchText.trim() }
      })
      this.showMobileMenu = false
    },
    searchByKeyword(keyword) {
      this.searchText = keyword
      this.handleSearch()
    },
    toggleCategoryDropdown(event) {
      event.stopPropagation()
      this.showCategoryDropdown = !this.showCategoryDropdown
    },
    closeCategoryDropdown() {
      this.showCategoryDropdown = false
    },
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu
      if (this.showMobileMenu) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = ''
      }
    },
    goToHome() {
      this.$router.push('/')
    },
    goToLogin() {
      this.$router.push('/login')
    },
    goToRegister() {
      this.$router.push('/register')
    },
    goToUserCenter() {
      if (!this.isLogin) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      this.$router.push('/user-center')
    },
    goToOrders() {
      if (!this.isLogin) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      this.$router.push('/orders')
    },
    goToFavorites() {
      if (!this.isLogin) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      this.$router.push('/favorite')
    },
    goToCart() {
      if (!this.isLogin) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      this.$router.push('/cart')
    },
    goToHelp() {
      this.$router.push('/help')
    },
    goToCategory(category) {
      this.$router.push({
        path: '/products',
        query: { categoryId: category.id }
      })
    },
    goToPath(path) {
      this.$router.push(path)
    },
    logout() {
      localStorage.removeItem('frontUser')
      this.userInfo = {}
      this.isLogin = false
      this.cartCount = 0
      this.favoritesCount = 0
      this.$message.success('退出登录成功')
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.modern-header {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 顶部信息栏样式 */
.top-info-bar {
  background-color: #f5f5f5;
  padding: 8px 0;
  font-size: 12px;
  color: #666;
}

.top-info-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-left {
  display: flex;
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item i {
  margin-right: 5px;
  font-size: 14px;
  color: #4caf50;
}

.info-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-link {
  cursor: pointer;
  transition: color 0.2s ease;
}

.info-link:hover {
  color: #4caf50;
}

.info-divider {
  color: #ddd;
}

.welcome-text {
  color: #4caf50;
  font-weight: 500;
}

/* 主导航区域样式 */
.main-navigation {
  padding: 15px 0;
}

.main-navigation .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-area {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #4caf50, #81c784);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.2);
}

.logo-icon i {
  font-size: 30px;
  color: white;
}

.logo-text h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.logo-slogan {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.search-box {
  flex: 1;
  max-width: 500px;
  margin: 0 20px;
}

.search-keywords {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-keywords span {
  font-size: 12px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.search-keywords span:hover {
  color: #4caf50;
}

.quick-actions {
  display: flex;
  gap: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.action-item i {
  font-size: 22px;
  color: #666;
  transition: color 0.2s ease;
}

.action-item span {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
  transition: color 0.2s ease;
}

.action-item:hover i,
.action-item:hover span {
  color: #4caf50;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff5722;
  color: white;
  font-size: 10px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 分类导航菜单样式 */
.category-nav {
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.category-nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-menu {
  display: flex;
  height: 45px;
  width: 100%;
}

.all-categories {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #4caf50;
  color: white;
  font-weight: 500;
  cursor: pointer;
  height: 100%;
}

.all-categories i {
  margin-right: 8px;
}

.dropdown-icon {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.dropdown-icon.is-active {
  transform: rotate(180deg);
}

.category-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 4px 4px;
  z-index: 10;
  max-height: 400px;
  overflow-y: auto;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.category-item:last-child {
  border-bottom: none;
}

.category-item i:first-child {
  margin-right: 10px;
  font-size: 16px;
  color: #4caf50;
  width: 20px;
  text-align: center;
}

.category-item span {
  flex: 1;
}

.category-item .el-icon-arrow-right {
  color: #ccc;
  transition: transform 0.2s ease;
}

.category-item:hover {
  background-color: #f5f5f5;
}

.category-item:hover .el-icon-arrow-right {
  transform: translateX(5px);
  color: #4caf50;
}

.nav-links {
  display: flex;
  height: 100%;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.nav-item.active,
.nav-item:hover {
  color: #4caf50;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: #4caf50;
}

/* 移动端菜单样式 */
.mobile-menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 24px;
  color: #333;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 143px; /* 顶部栏+主导航+分类导航的高度 */
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 999;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.mobile-search {
  margin-bottom: 20px;
}

.mobile-nav-links {
  margin-bottom: 20px;
}

.mobile-nav-item {
  padding: 12px 0;
  font-size: 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.mobile-nav-item.active {
  color: #4caf50;
  font-weight: 500;
}

.mobile-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.mobile-categories {
  margin-bottom: 20px;
}

.mobile-category-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-category-item i {
  margin-right: 10px;
  font-size: 16px;
  color: #4caf50;
  width: 20px;
  text-align: center;
}

.mobile-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.mobile-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
}

.mobile-action-item i {
  font-size: 24px;
  color: #4caf50;
  margin-bottom: 8px;
}

/* 响应式布局 */
@media (max-width: 992px) {
  .info-left {
    gap: 10px;
  }
  
  .search-box {
    max-width: 400px;
  }
  
  .quick-actions {
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .info-left {
    display: none;
  }
  
  .main-navigation .container {
    flex-wrap: wrap;
  }
  
  .search-box {
    order: 3;
    max-width: 100%;
    margin: 15px 0 0;
    width: 100%;
  }
  
  .search-keywords {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
  
  .mobile-menu {
    display: block;
  }
  
  .category-menu {
    display: none;
  }
}

@media (max-width: 576px) {
  .logo-area {
    flex: 1;
  }
  
  .logo-text h1 {
    font-size: 16px;
  }
  
  .logo-slogan {
    display: none;
  }
  
  .quick-actions {
    display: none;
  }
  
  .info-right {
    font-size: 11px;
    gap: 5px;
  }
  
  .top-info-bar {
    padding: 5px 0;
  }
  
  .mobile-menu {
    top: 103px; /* 调整移动端菜单顶部位置 */
  }
}
</style> 